---
description: How to integrate GraphQL Code Generator into your development workflow. Learn how to run it in watch mode, or as part of your CI flow.
---

import { Callout } from '@theguild/components'

# Development workflow

GraphQL Code Generator should be integrated as part of your development workflow.

## Scripts Integration

If you wish to run the codegen before starting your server/app, you can use `pre` scripts in your `package.json`, for example:

```json filename="package.json" {6-7}
{
  "scripts": {
    "dev": "nodemon app.js",
    "start": "node app.js",
    "generate": "graphql-codegen",
    "prestart": "yarn generate",
    "predev": "yarn generate"
  }
}
```

This way, the codegen generates the output according to your configuration before each time you run `dev` or `start` scripts.

It's also helpful to run the codegen during your continuous integration flow and ensure that your code continually compiles with the generated output; this way, you can detect breaking changes in your GraphQL schema and GraphQL documents.

## Watch Mode

<Callout type="info">
Watch mode was made optional to reduce install size in CI and prevent build errors in certain environments.

To use watch mode, install [`@parcel/watcher`](https://www.npmjs.com/package/@parcel/watcher).

</Callout>

If you wish to run the codegen in watch mode, you can specify `--watch` (or `-w`) when running it.

You can either run it in a separate terminal session or use tools like [`concurrently`](https://npmjs.com/package/concurrently) to run two scripts at the same time:

```json {3} /--watch/
{
  "scripts": {
    "dev": "concurrently \"nodemon app.js\" \"yarn generate --watch\"",
    "start": "node app.js",
    "generate": "graphql-codegen",
    "prestart": "yarn generate"
  }
}
```

If you wish, you can specify a custom list of files to watch, by adding a glob expression to the command, using `--watch` flag:

```sh /"src/**/*.js"/
yarn graphql-codegen --watch "src/**/*.js"
```

Use this when you are loading your schema or documents from a single code file that depends on other files internally because codegen can't tell that you're using those files automatically.

We use [`@parcel/watcher`](https://github.com/parcel-bundler/watcher) which supports subscribing to realtime notifications of changes in a directory. It works recursively, so changes in sub-directories will also be emitted.

```ts {6-10}
import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  schema: 'http://localhost:4000/graphql',
  // ...
  watch: true
}

export default config
```

## Monorepo and Yarn Workspaces

If you are using a monorepo structure, with tools such as [Yarn Workspaces](https://yarnpkg.com/lang/en/docs/workspaces) or [Lerna](https://github.com/lerna/lerna), we recommend installing the codegen in the root of your monorepo.

If you need to execute the codegen multiple times, note that you can specify multiple fields for `generates` field, for example:

```ts {7-8}
import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
  schema: 'server/src/**/*.graphql',
  documents: 'client/src/**/*.graphql',
  generates: {
    'client/src/models.ts': ['typescript', 'typescript-operations'],
    'server/src/models.ts': ['typescript', 'typescript-resolver']
  }
}

export default config
```

## What's next?

Get started with our guides:

- [React and Vue](/docs/guides/react-vue)
- [Angular](/docs/guides/angular)
- [Svelte](/docs/guides/svelte)
- [Apollo and Yoga server](/docs/guides/graphql-server-apollo-yoga)
- [GraphQL Modules](/docs/guides/graphql-modules)

If your stack is not listed above, please refer to [our plugins directory](/plugins).
